프레임워크 없는 프론트엔드 개발

On this page

3장. DOM 이벤트 관리

You aren’t gonna need it.

정말 필요하다고 간주할 때까지 기능을 추가하지 마라

이벤트란?

웹 어플리케이션에서 발생하는 동작으로 다양한 이벤트 타입이 존재한다.

속성에 핸들러 연결

on 속성을 통해 DOM 요소에 이벤트를 연결할 수 있음

const button = document.querySelector("button");
button.onclick = () => {
    console.log("click!")
}

한번에 하나의 핸들러만 연결할 수 있어서, 손실되기 쉽다는 단점이 있다.

addEventListener 로 핸들러 연결

addEventListener 를 통해서 DOM 노드에 이벤트를 추가할 수 있다.

첫 번째 매개변수는 이벤트 타입, 두 번째 매개변수는 콜백 함수로 이벤트가 트리거될 때 호출된다.

복수의 핸들러를 연결할 수 있다.

removeEventListener 를 통해 핸들러를 제거할 수 있다. 이때 callback 함수의 참조를 유지해야한다.

이벤트 객체

웹 어플리케이션에 전달된 모든 이벤트에는 Event 인터페이스를 구현한다.

이벤트의 종류에 따라 확장된 이벤트 사용할 수 있다.

DOM 이벤트 라이프 사이클

addEventListener 의 세 번째 매개변수는 useCapture로 기본 값은 false

이벤트 버블링: 이벤트 target 노드에서 부터 시작해 모든 조상요소로 이벤트가 전파

이벤트 캡쳐링: 조상요소에서 부터 시작해 이벤트 target 노드까지 이벤트가 전파

stopPropagation 을 통해 버블 체인을 중단할 수 있다.

캡쳐 단계: 이벤트가 html에서 목표 요소로 이동

목표 단계: 목표 요소 도달

버블 단계: 목표 요소에서 html 로 이동

사용자 정의 이벤트

CustomEvent 생성자 함수를 통해서 사용자 정의 이벤트를 생성할 수 있다.

dispatchEvent 를 통해서 이벤트를 발생시키고, addEventListener 로 표준 이벤트 리스너를 추가할 수있다.

문자열에는 이벤트 핸들러를 추가할 수 없기 때문에 document.createElement API를 사용해 새 DOM 노드를 생성할 수 있다.

template 태그: 렌더링 엔진의 스탬프로 사용할 수 있는 보이지 않는 태그

기본 이벤트 처리 아키텍쳐

초기 상태를 기반으로 렌더링 → 이벤트 발생 → 새로운 상태 생성 → 새로운 상태 기반으로 리렌더링

각각의 구성 요소에 events 를 바인딩.

리스트의 경우 매번 모든 리스트 요소에 이벤트를 핸들링하는 것보다, 부모 요소에 이벤트를 핸들링해 하위요소에서 이벤트가 울렸는지 확인하는 것이 성능상 좋다.